import { Form, Input, Button, Table, Popconfirm, Space, Select, Pagination } from 'antd'
import React, { useState,useEffect } from 'react';
import './customerInformation.scss'
import CustomerAdd from './CustomerAdd/CustomerAdd';
import CustomerDetail from './CustomerDetail/CustomerDetail';
import http from '../../utils/http'
import store from '../../store';

const {Option} = Select;

const Customer_information_management = () => {
  const [form] = Form.useForm();
  const [isCustomerAdd, setAdd] = useState(false);
  const [isCustomerDetail, setDetail] = useState(false);
  const [data, setData] = useState([])
  const [value4,setValue4] = useState()
  const [delkey, setDelkey] = useState([])
  const [selectedRowKeys, setSelectedRowKeys] = useState([])

  function clientData(){
    http({
      url:'/customer-development/findCustomer',
      params:{
        personName:form.getFieldsValue().username ? form.getFieldsValue().username : '',
        intentionGrade:form.getFieldsValue().grade ? form.getFieldsValue().grade : '',
        perGrade:form.getFieldsValue().level ? form.getFieldsValue().level : '',
        followState:form.getFieldsValue().state ? form.getFieldsValue().state : '',
      }
    }).then((res)=>{
      console.log('客户管理渲染',res);
      store.lijuhua.total = res.data.countRows;
      if(res.code==200){
        let arr=res.data.listCustomer.map((v,i)=>{
          return {
            key: v.cusId,
            name: v.personName,
            grade: v.intentionGrade==0?'低':(v.intentionGrade==1?'中':'高'),
            level: v.perGrade+'级',
            state: v.followState==0?'流失':(v.followState==1?'意向':'成交'),
            header: v.adminName,
            appendtime: v.cusCreateTime,
            recenttime: v.followUpTime
          }
        })
        setData(arr)
      }
    })
  }

  // 一上来就渲染客户管理表格数据
  useEffect(() => {
    clientData();
  }, [])

  // 跳转到客户信息新增组件
  const add = () => {
    setAdd(true)
  }

  // 搜索
  const search = () => {
    console.log(form.getFieldsValue().username);
    console.log(parseInt(form.getFieldsValue().grade));
    console.log(form.getFieldsValue().level);
    console.log(form.getFieldsValue().state);
    clientData();
  }

  // 重置
  const resize = () => {
    setSelectedRowKeys([]);
    store.lijuhua.current = 1
    form.setFieldsValue({
      username: '',
      grade: '',
      level:'',
      state:''
    })
    clientData();
  }

// 页码
const pageChange = (page, size) => {
  store.lijuhua.current = page
  http({
    url: '/customer-development/findCustomer',
    params: {
      current: page,
    }
  }).then((res) => {
    console.log('渲染客户管理表格', res);
    if (res.code == 200) {
      console.log(res.data.listCustomer);
      let arr = res.data.listCustomer.map((v, i) => {
        return {
          key: v.cusId,
          name: v.personName,
          grade: v.intentionGrade==0?'低':(v.intentionGrade==1?'中':'高'),
          level: v.perGrade+'级',
          state: v.followState==0?'流失':(v.followState==1?'意向':'成交'),
          header: v.adminName,
          appendtime: v.cusCreateTime,
          recenttime: v.followUpTime
        }
      })
      setData(arr)
    }
  })
}


  // 跳转到详情组件
  const openEditBox = (a,b) => {
    setDetail(true)
    setValue4(b.key);
  }

  // 取消删除操作
  function cancel(e) {
    console.log('cancel', e);
  }
  // 确认删除：单删和批量删
  function confirm(a, b) {
    let id = [];
    if (b) {
      // 单删
      id.push(b.key)
    } else {
      // 批量删除
      id = delkey;
    }
    console.log(id);
    http({
      url: '/customer-development/deleteCustomer',
      method: 'post',
      data: id
    }).then((res) => {
      console.log('删除成功',res);
      clientData();
    })
  }

  // 表头
  const columns = [
    {
      title: '客户名称',
      dataIndex: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '意向等级',
      dataIndex: 'grade',
    },
    {
      title: '客户等级',
      dataIndex: 'level',
    },
    {
      title: '跟进状态',
      dataIndex: 'state',
    },
    {
      title: '跟进人',
      dataIndex: 'header',
    },
    {
      title: '新增时间',
      dataIndex: 'appendtime',
    },
    {
      title: '最近跟进时间',
      dataIndex: 'recenttime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (text, record) => (
        <Space size="middle">
          <a onClick={()=>{openEditBox(text,record)}}>详情</a>
          <Popconfirm
            title="确定要删除吗?"
            onConfirm={() => { confirm(text, record) }}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // 前端客户管理假数据
  // const data = [
  //   {
  //     key: '1',
  //     name: '张三',
  //     grade: '高',
  //     level: '二级',
  //     state: '流失',
  //     header: '雨涵',
  //     appendtime: '2020-5-17',
  //     recenttime: '2022-1-23'
  //   },
  //   {
  //     key: '2',
  //     name: '张三',
  //     grade: '高',
  //     level: '二级',
  //     state: '流失',
  //     header: '雨涵',
  //     appendtime: '2020-5-17',
  //     recenttime: '2022-1-23'
  //   },
  //   {
  //     key: '3',
  //     name: '张三',
  //     grade: '高',
  //     level: '二级',
  //     state: '流失',
  //     header: '雨涵',
  //     appendtime: '2020-5-17',
  //     recenttime: '2022-1-23'
  //   },
  //   {
  //     key: '4',
  //     name: '张三',
  //     grade: '高',
  //     level: '二级',
  //     state: '流失',
  //     header: '雨涵',
  //     appendtime: '2020-5-17',
  //     recenttime: '2022-1-23'
  //   },
  // ]; // rowSelection object indicates the need for row selection

  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys);
      setDelkey(selectedRowKeys);
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
      key: record.key,
    }),
  };

  if(isCustomerAdd){
    return <div>
      <CustomerAdd setAdd={setAdd}/>
    </div>
  }else if(isCustomerDetail){
    return <div>
      <CustomerDetail value4={value4} setDetail={setDetail}/>
    </div>
  }else{
    return <div className='roleContent'>
    <Form form={form} name="horizontal_login" layout="inline" className='title'>
      <Form.Item
        name="username">
        <div className='kuai'>
          <span></span>
          <span>客户信息管理</span>
        </div>
      </Form.Item>
      <Form.Item className='btn'>
        <div>
          <Button className='cha'
            type="primary"
            onClick={add}>新增</Button>
          <Popconfirm title='确定要将它们全部删除吗？'
            onConfirm={() => { confirm() }}
            onCancel={cancel} okText='YES' cancelText='NO'>
            <a href='#'> <Button className='resize' type="primary">批量删除</Button></a>
          </Popconfirm>
        </div>

      </Form.Item>
    </Form>
    <div className='biao'>
      <Form form={form} name="horizontal_login" layout="inline" className='Role'>
        <Form.Item
          name="username"
          label='客户名称'
        ><Input placeholder='请输入客户名称' />
        </Form.Item>
        <Form.Item
            name="grade"
            label='意向等级'
        >
          <Select placeholder='请选择' className='select'>
              <Option value="2">高</Option>
              <Option value="1">中</Option>
              <Option value="0">低</Option>
          </Select>
        </Form.Item>
        <Form.Item
            name="level"
            label='客户等级'
        >
          <Select placeholder='请选择' className='select'>
              <Option value="1">1级</Option>
              <Option value="2">2级</Option>
              <Option value="3">3级</Option>
              <Option value="4">4级</Option>
              <Option value="5">5级</Option>
          </Select>
        </Form.Item>
        <Form.Item
            name="state"
            label='跟进状态'
        >
          <Select placeholder='请选择' className='select'>
              <Option value="0">流失</Option>
              <Option value="1">意向</Option>
              <Option value="2">成交</Option>
          </Select>
        </Form.Item>
        <Form.Item className='btn'>
          <div>
            <Button className='cha'
              type="primary"
              onClick={search}>查询</Button>
            <Button className='resize' onClick={resize} type="primary">重置</Button>
          </div>

        </Form.Item>
      </Form>
      <Table className='table1' pagination={false}
        rowSelection={{
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data}
      />
      <Pagination className='page' defaultCurrent={1} current={store.lijuhua.current} total={store.lijuhua.total} onChange={pageChange} />
    </div>
  </div>
  }
};

export default Customer_information_management;